<template>
  <div class="webhook_header">
    <a-input class="webhook_header_key" v-model="header.key"></a-input>
    <div class="webhook_header_value">
        <div class="webhook_header_value_input" v-for="(item, index) in inputList" :key="item.id">
            <workflow-input class=""
                v-model="header.storeValue" 
                :output="output"
                @change="handleInputChange"
                webhook="webhook"
                :data_obj="data_obj"
            ></workflow-input>
            <a-icon v-if="index !== 0" @click="() => handleDelete(item)" type="close" />
        </div>
        <!-- <a-button class="add_bt" @click="handleAddClick"> 添加输入框 </a-button> -->
    </div>
    <a-icon class="header_delete" @click="deleteHeader" type="delete" />
  </div>
</template>

<script>
import { uuid } from '@/utils/utils';
import WorkflowInput from "../workflowInput.vue"
export default {
    components:{
        WorkflowInput
    },
    props:{
		header: {
			default: {}
		},
		output: {
			default: []
		},
        data_obj: {
            type: Object,
            default: {}
        }
    },
    data(){
        return {
            headerKey: '',
            inputList: [
                {
                    value: '',
                    id: uuid()
                }
            ]
        }
    },
    methods:{
        handleDelete(item){
            this.inputList = this.inputList.filter(i => i.id !== item.id)
            this.handleInputChange()
        },
        deleteHeader(){
            this.$emit('deleteHeader', this.header);
        },
        handleInputChange(text, data, data_obj){
            // let value = ''
            // let storeValue = ''
            // this.inputList.forEach(input => {
            //     value += input.value
            // })
            // this.inputList.forEach((input, index) => {
            //     if(index === 0){
            //        storeValue += input.value
            //     } else {
            //         storeValue += '_&*^*&_' + input.value 
            //     }
            // })
			this.$emit('change', this.header, data, text, data_obj);
        },
        handleAddClick(){
            this.inputList.push({
                value: '',
                id: uuid()
            })
        },
    },
    mounted(){
        if(this.header.storeValue){
            let data = this.header.storeValue.split('_&*^*&_')
            let list = []
            data.forEach(d => {
                list.push({
                    value: d,
                    id: uuid()
                })
            })
            this.inputList = list
        }
    }
}
</script>

<style lang="less">
.webhook_header{
    display: flex;

    .webhook_header_key{
        margin-top: 5px;
        width: 100px;
        flex-shrink: 0;
    }
    .webhook_header_value{
        width: 300px;
        margin-left: 20px;

        .webhook_header_value_input{
            .workflow_input{
                width: 100px;
            }
            
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .add_bt{
            margin-top: 10px;
            margin-left: 180px;
        }
    }
    .header_delete{
        color: red;
        margin: auto;
        margin-left: 10px;
    }
}
</style>